<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="../lib/angularjs.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <div>
        <h1>case1：当scope为false时，是双向绑定</h1>
        <label for="case1">
            父级的case1：{{case1}}
            <input id="case1" type="text" ng-model="case1">
        </label>
        <scope:is:boolean:false></scope:is:boolean:false>
    </div>
    <hr />
    <div>
        <h1>case2：当scope为true时，是单向绑定</h1>
        <label for="case2">
            父级的case2：{{case2}}
            <input id="case2" type="text" ng-model="case2">
        </label>
        <scope-is-boolean-true></scope-is-boolean-true>
    </div>
    <hr />
    <div>
        <h1>case3：当scope为{}时，表示隔绝子级$scope的向上读取，尽管父级和子级都用同个case3变量</h1>
        <label for="case3">
            父级的case3：{{case3}}
            <input id="case3" type="text" ng-model="case3">
        </label>
        <scope:is:empty:object></scope:is:empty:object>
    </div>
    <hr />
    <div>
        <h1>case4：当scope为{}时，通过@来引用传递给自定义指令的值，需要双花括号版本</h1>
        <label for="case4">
            父级的case4：{{case4}}
            <input id="case4" type="text" ng-model="case4">
        </label>
        <scope-is-object-at cus-color="{{case4}}"></scope-is-object-at>
    </div>
    <hr />
    <div>
        <h1>case5：当scope为{}时，通过=来引用传递给自定义指令的值，不需要双花括号版本</h1>
        <label for="case5">
            父级的case5：{{case5}}
            <input id="case5" type="text" ng-model="case5">
        </label>
        <scope:is:object:equal cus-font-size="case5"></scope:is:object:equal>
    </div>
    <hr />
    <div>
        <h1>case6：当scope为{}时，通过&来引用传递给自定义指令的函数</h1>
        <label for="case6">
            父级的case6：{{case6()}}
        </label>
        <scope-is-object-function data="case6()"></scope-is-object-function>
    </div>
</body>
<script>
    const myApp = angular.module("myApp", [])
    myApp.controller("myCtrl", ["$scope", function ($scope) {
        $scope.case1 = "当scope为false时，是双向绑定"
        $scope.case2 = "当scope为true时，是单向绑定"
        $scope.case3 = "当scope为{}时，表示隔绝读取父级$scope的属性"
        $scope.case4 = "red"
        $scope.case5 = "12"
        $scope.case6 = function () {
            return [{ name: "海贼王", time: "12年" }, { name: "妖精的尾巴", time: "7年" }]
        }
    }])
    myApp.directive("scopeIsBooleanFalse", [function () {
        return {
            restrict: "AE",
            template: `<div>
                子级的case1：
                {{case1}}
                <input type="text" ng-model="case1">
            </div>`,
            scope: false,  // 当scope为false时，表示$scope的双向绑定。
        }
    }])
    myApp.directive("scopeIsBooleanTrue", [function () {
        return {
            restrict: "AE",
            template: `<div>
                子级的case2：
                {{case2}}
                <input type="text" ng-model="case2">
            </div>`,
            scope: true, // 当scope为true时，表示$scope的单向绑定。注意：当子级控制了之后，父级不能再控制子级。
        }
    }])
    myApp.directive("scopeIsEmptyObject", [function () {
        return {
            restrict: "AE",
            template: `<div>
                子级的case3：
                {{case3}}
                <input type="text" ng-model="case3">
            </div>`,
            scope: {}, // 当为{}时，表示子$scope是独立的，不会向上读取父$scope的属性。
        }
    }])

    // 当scope为{}时，还可设置自定义指令的属性传值，这样可以在子级指令有scope属性的时候，父级也能通过传值来控制它。另外，关于属性名的使用，属性的命名如果是驼峰，在使用的时候要跟指令的使用形式一样，用-分开驼峰。
    myApp.directive("scopeIsObjectAt", [function () {
        return {
            restrict: "AE",
            template: `<div style="color: {{case4}};">
                子级的casr4：{{case4}}
                <input type="text" ng-model="case4">
            </div>`,
            scope: {
                case4: '@cusColor' // @表示属性的单向传值（父=>子），传递的属性值如果是变量需要引用{{}}，父级可通过传值控制子级，子级也可以通过自己设置来控制，并且不影响父级传值的来源。注意：当子级控制了之后，父级改变传值，还是能控制子级。
            }
        }
    }])
    myApp.directive("scopeIsObjectEqual", [function () {
        return {
            restrict: "AE",
            template: `<div style="font-size: {{case5}}px;">
                子级的casr5：{{case5}}
                <input type="text" ng-model="case5">
            </div>`,
            scope: {
                case5: '=cusFontSize' // =表示属性的双向传值（父<=>子），传递的属性值即使是变量也不需要引用{{}}，父级可通过传值控制，子级也可以通过自己设置来控制，并且也能控制父级传值的来源。
            }
        }
    }])
    myApp.directive("scopeIsObjectFunction", [function () {
        return {
            restrict: "AE",
            template: `<ul>
                子级的casr6：{{case6()}}
                <li ng-repeat="item in case6()">
                    <p>动画名称：{{item.name}}</p>
                    <p>动画时间：{{item.time}}</p>
                </li>
            </ul>`,
            scope: {
                case6: '&data' // &表示属性的函数调用传递，父级传递给子级的函数要调用，子级接收到传递的函数，使用时也要调用。
            }
        }
    }])
</script>

</html>